<template>
  <div style="background-color: #FFFFFF;padding: 25px">
    <div class="title">离职申请</div>
    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item  label="所在单位" prop="work">
        <a-input v-model="form.areaName" :disabled="true" :placeholder="form.areaName" />
      </a-form-model-item>
      <a-form-model-item  label="所在部门" prop="departName">
        <a-input v-model="form.departName" :disabled="true" :placeholder="form.departName" />
      </a-form-model-item>
      <a-form-model-item  label="离职日期" prop="quitTime">
        <a-date-picker v-model="form.quitTime" placeholder="请选择离职日期"/>
      </a-form-model-item>
      <a-form-model-item  label="离职原因" prop="quitReason">
        <a-input v-model="form.quitReason" placeholder="请输入"/>
      </a-form-model-item>
      <a-form-model-item label="人员交接" prop="handoverStatus">
        <a-radio-group v-model="form.handoverStatus">
          <a-radio value="0">
            一键交接
          </a-radio>
          <a-radio value="1">
            批量交接
          </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label=" " v-if="form.handoverStatus == 0">
        <a-select v-model="form.zgname" placeholder="请选择接收人员">
          <a-select-option v-for="(item,index) in yijian" :key="index" :value="item">
          {{ item }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

        <div class="table-page-content" v-if="form.handoverStatus == 1" style="margin-bottom:50px;">
          <z-table ref="table" rowKey="id" :showAlert="false" :showSelection="true" :loading="loading"
            :columns="columns" :dataSource="pageData" @selectedRow="selectedRow">
            <div slot="customTitle"><div style="color: #1890FF;">■</div></div>
            <template slot="action" slot-scope="text, record">
                <a-button type="link" @click="Management(record)" style="padding: 0;margin-right: 5px;">选择</a-button>            
            </template>
            <template slot="sjskType" slot-scope="text">
              <span>{{text == 1?'社戒':'社康'}}</span>
            </template>
            <template slot="personStatus" slot-scope="text">
              <span>{{text == 1?'正在执行':text == 2?'请假中':
              text == 3?'中止':'归档'}}</span>
            </template>
            <template slot="signType" slot-scope="text">
              <span>{{text == 1?'已注册':'未注册'}}</span>
            </template>
            <template slot="departmentName" slot-scope="text">
              <span>{{text?text:'无'}}</span>
            </template>
            <!-- <template slot="check" >
              <a-checkbox value="a"></a-checkbox>
            </template> -->
          </z-table>
        </div>

      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="onSubmit">
          提交
        </a-button>
        <a-button style="margin-left: 10px;" @click="resetForm">
          取消
        </a-button>
      </a-form-model-item>
    </a-form-model>
    <AddModal3 ref="addModalId3" />
    <!-- <a-button @click="Management(record)" type="link" :disabled="isDisabled" style="color:black;font-size: 8px">弹窗</a-button> -->
  </div>
</template>

<script>
/*
/supervise/supervise
sjsk/specialist/supervise/supervise

/supervise/personnelEntry
sjsk/specialist/personnel/personnelEntry
 */
 import AddModal3 from './ManagementAddModal'
import {quit,getDepart,administrotorsList} from '@api/sjsk/specialist'
import {getPersonList} from '@api/sjsk/personService'
import {USER_INFO} from "@/store/mutation-types";
import Vue from 'vue'
export default {
  components: {
    AddModal3,
  },
  name: "personnelDimission",
  async beforeMount() {
    console.log(Vue.ls.get(USER_INFO));
    getDepart(Vue.ls.get(USER_INFO).id)
          .then(res => {
            if (res.success) {
              // this.$message.success('成功！')
              this.form.departName = res.result.departName
              this.form.areaName = res.result.areaName
            } else {
              this.loading = false
            }
          })
          .catch(e => {
            this.loading = false
            this.$message.warn('请求失败！')
          })
    await getPersonList({
            belongManagerId:Vue.ls.get(USER_INFO).id,
            ...this.pageFilter
          })
          .then(res => {
            if (res.success) {
              this.pageData = res.result
            } else {
              this.loading = false
            }
          })
          .catch(e => {
            this.loading = false
            this.$message.warn('请求失败！')
          })
    await administrotorsList({
            pageNo: 1,
            pageSize: 100
          })
          .then(res => {
            if (res.success) {
              this.pageData1 = res.result
              console.log(this.pageData1);
            } else {
              this.loading = false
            }
          })
          .catch(e => {
            this.loading = false
            this.$message.warn('请求失败！')
          })

          this.pageData1.records.forEach(item=>{
            this.yijian.push(item.personnelName)
          })
          
  },
  data() {
    return {
      loading: false,
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      labelCol: { span: 2 },
      wrapperCol: { span: 4 },
      other: '',
      form: {},
      yijian:[],
      rules: {
        quitTime: [
          { required: true, message: 'Please input Activity name', trigger: 'blur' },
        ],
        quitReason: [
          { required: true, message: 'Please input Activity name', trigger: 'blur' },
        ],
        handoverStatus: [
          { required: true, message: 'Please input Activity name', trigger: 'blur' },
        ],
      },
      columns:[
        // {
        //   // width:50,
        //   slots: { title: 'customTitle' },
        //   dataIndex: 'check',
        //   align: 'center',
        //   scopedSlots: { customRender: 'check' },
        //   // :style="{ borderBottom: '1px solid #E9E9E9' }"
        // },
        {
          // width:50,
          title: '姓名',
          dataIndex: 'realName',
          align: 'center',
        },
        {
          // width:50,
          title: '身份证号',
          dataIndex: 'identityCard',
          align: 'center',
        },
        {
          // width:50,
          title: '类型',
          dataIndex: 'sjskType',
          align: 'center',
          scopedSlots: { customRender: 'sjskType' },
        },
        {
          // width:50,
          title: '注册手机号',
          dataIndex: 'phone',
          align: 'center',
        },
        {
          // width:50,
          title: '执行情况',
          dataIndex: 'personStatus',
          align: 'center',
          scopedSlots: { customRender: 'personStatus' },
        },
        {
          // width:50,
          title: '执行时间',
          dataIndex: 'executionDate',
          align: 'center',
        },
        {
          // width:50,
          title: '执行地区',
          dataIndex: 'departmentName',
          align: 'center',
          scopedSlots: { customRender: 'departmentName' },
        },
        {
          // width:50,
          title: 'APP注册状态',
          dataIndex: 'signType',
          align: 'center',
          scopedSlots: { customRender: 'signType' },
        },
        {
          // width:50,
          title: '人员交接',
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      pageData:[],
      pageData1:[]
    };
  },
  methods: {
    selectedRow(val){
      console.log(val);
    },
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          // this.$message.success('成功')
          this.form.quitTime = this.timestampToTime(this.form.quitTime)
          // console.log(this.pageData1.records);
          this.form.administartorsId = this.pageData1.records.filter(item =>{
            return item.personnelName == this.form.zgname
          })
          this.form.administartorsId = this.form.administartorsId[0].id
          quit(this.form)
          .then(res => {
            if (res.success) {
              this.$message.success('成功！')
              console.log(res);
            } else {
              this.loading = false
            }
          })
          .catch(e => {
            this.loading = false
            this.$message.warn('请求失败！')
          })
        } 
        else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
    timestampToTime(timestamp) {
      if (timestamp === 0 || timestamp == null) {
        return ''
      } else {
        var date = new Date(Date.parse(timestamp))
        var Y = date.getFullYear() + '-'
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
        var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
        return Y + M + D
      }
    },
    Management(record) {
      // console.log(record);
      this.$refs.addModalId3.show(record)
    },
  },
}
</script>

<style scoped>
.title{
  width: 100%;
  border-bottom: 1px solid #E9E9E9;
  margin-bottom: 25px;
  padding-bottom: 15px;
  font-size: 18px;
  font-weight: 600
}
</style>